import React, { useEffect, useState } from "react";
import "./App.css";
// import useFetch from "./hooks/useFetch";
// import { ITodoList } from "./interface/todoList";
// import TodoList from "./pages/todoList";
import MainRouter from "./route";
import { NavLink } from "react-router-dom";
import { Button } from "antd";
import { useCounterStore } from "./store";

function App() {
  // const [url, setUrl] = useState('https://jsonplaceholder.typicode.com/todos')
  // const { data, loading, error } = useFetch<Array<ITodoList>>(url)
  // console.log(data, loading, error)

  // if(loading) {
  //   return <div>Loading...</div>
  // }

  // return <div className="app">
  //   <button onClick={() => setUrl("https://jsonplaceholder.typicode.com/todos/1")}>1111111111111</button>
  //   <ul>
  //   { data?.map(item => {
  //     return <li key={item.id}>{item.title}</li>
  //   }) }
  //   </ul>
  // </div>
  // const [count1, setCount1] = useState(0);
  // const { count, increment, decrement } = useCounterStore();
  // useEffect(() => {
  //   const timer = setInterval(() => {
  //     console.log(count1);
  //   }, 1000);

  //   return () => {
  //     console.log("clear");
  //     clearInterval(timer);
  //   };
  // }, [count1]);
  return (
    <div className="flex flex-col justify-start items-center  ">
      {/* <Button onClick={increment}>{count}</Button>
      <Button onClick={decrement}>{count}</Button> */}
      {/* <h1>{count1}</h1>
      <Button onClick={() => setCount1(count1 + 1)}>+</Button> */}
      <div className="nav bg-blue-950 flex items-center w-[100%] text-white">
        <div className="w-[100px] ml-[20px] text-lg">
          <p>React 记录</p>
        </div>
        <div className="  flex justify-center items-center w-[100%] text-white">
          <NavLink className="p-2" to="/">
            首页
          </NavLink>
          <NavLink className="p-2" to="/login">
            登录
          </NavLink>
          <NavLink className="p-2" to="/test">
            类型练习
          </NavLink>
          <NavLink className="p-2" to="/controller">
            受控与非受控
          </NavLink>
          <NavLink className="p-2" to="/calendar">
            迷你日历
          </NavLink>
          <NavLink className="p-2" to="/myCalendar">
            日历组件
          </NavLink>
          <NavLink className="p-2" to="/advancedDocs">
            进阶指南
          </NavLink>
        </div>
        <div className=" w-[100px] ">
          <p>张三</p>
        </div>
      </div>

      <div className="content w-[65%] p-[20px]">
        <MainRouter></MainRouter>
      </div>
      {/* <div className="flex justify-center items-center h-[80vh]">
        <TodoList></TodoList>
      </div> */}
    </div>
  );
}

export default App;
